<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考试等待</title>
  <style>
    .button {
      padding: 20px 30px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      width: 200px;
      margin: 0 auto;
      overflow: hidden;
      display: grid;
      justify-items: center;
    }

    .container {
      display: grid;
      justify-items: center;
    }

    .countdown {
      width: 240px;
      height: 305px;
      margin: 0 auto;
      text-align: center;
      line-height: 1;
      color: black;
      overflow: hidden;
      display: grid;
      justify-items: center;
      border-width: 2px;
      border-style: solid;
      border-color: black;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: black;
      color: aliceblue;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }

    .countdown small {
      font-size: 17px;
    }

    table {
      position: fixed;
      border-collapse: collapse;
      width: 50%;
    }

    td {
      border: 1px solid black;
      padding: 5px;
      text-align: center;
    }
  </style>
</head>


<body>
  <div class="container">
    <table id="countdownTable">
      <tr>
        <td>考试开始时间</td>
        <td id="examStartTime">2024-07-15 14:30:00</td>
      </tr>
    </table>
  </div>
  <br>
  <br>

  <div class="countdown">
    <p class="next">考试开始倒计时</p>
    <p class="next">请做好准备</p>
    <p class="clock">
      <span id="day">00</span>
      <i>:</i>
      <span id="hour">00</span>
      <i>:</i>
      <span id="minute">00</span>
      <i>:</i>
      <span id="second">00</span>
    </p>
  </div>
  <br><br><br>
  <button class="button" id="examButton" onclick="gotoExam()" disabled>进入考试</button>

  <script>

    function getCurrentTime() {
      return new Date();
    }

    async function fetchEndTime() {
      const response = await fetch('/testwaiting/begintime');
      if (!response.ok) {
        throw new Error(`HTTP 错误! 状态: ${response.status}`);
      }
      const data = await response.json();
      var str = JSON.stringify(data.endTime);
      str = str.slice(1, -1);
      console.log(str);
      console.log('2024-7-15 14:30:00');
      document.getElementById('examStartTime').textContent = data.endTime;
      return new Date(str);
    }


    // 计算剩余时间
    async function calculateCountdown() {
      const currentTime = getCurrentTime();
      const endTime = await fetchEndTime();
      const timeDifference = endTime - currentTime;
      const button = document.getElementById('examButton');

      if (timeDifference <= 0) {
        button.style.backgroundColor = '#4CAF50';
        button.disabled = false;
      } else {
        button.style.backgroundColor = 'grey';
        button.disabled = true;
      }
      const d = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      const h = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const m = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
      const s = Math.floor((timeDifference % (1000 * 60)) / 1000);

      if (timeDifference <= 0) {
        document.querySelector('#day').innerHTML = '00'
        document.querySelector('#hour').innerHTML = '00'
        document.querySelector('#minute').innerHTML = '00'
        document.querySelector('#second').innerHTML = '00'
      }
      else {
        if (d < 10) {
          document.querySelector('#day').innerHTML = '0' + h;
        }
        else {
          document.querySelector('#day').innerHTML = h;
        }
        if (h < 10) {
          document.querySelector('#hour').innerHTML = '0' + h;
        }
        else {
          document.querySelector('#hour').innerHTML = h;
        }
        if (m < 10) {
          document.querySelector('#minute').innerHTML = '0' + m;
        }
        else {
          document.querySelector('#minute').innerHTML = m;
        }
        if (s < 10) {
          document.querySelector('#second').innerHTML = '0' + s;
        }
        else {
          document.querySelector('#second').innerHTML = s;
        }

      }

    }
    calculateCountdown();
    // 每隔 1 秒更新倒计时
    setInterval(calculateCountdown, 1000);
    function gotoExam() {
      window.location.href = './examination-CS.html';
    }
  </script>
</body>

</html>